<template>
	<view class="container">
		<view class="content" :style="{'fontFamily':themeColor.typeface,'color':themeColor.main_font_color}">
			<view class="my-header" :style="{'--main-bg-color':themeColor.main_color}">
				<view class="my-header-bg"></view>
				<view class="my-userInfo" v-if="userInfo">
					<image class="head_img" :src="userInfo.head_img" mode=""></image>
					<view style="display: flex;justify-content: center;align-items: center;gap:12rpx;">
						<image style="width: 42rpx;" src="../../static/vip.png" mode="widthFix"></image> {{userInfo.nickName}}
					</view>
					<view>
						余额:￥{{(userInfo.user_monery).toFixed(2) || 0}}
					</view>
					
				</view>
			</view>
			<view class="my-serve">
				<view class="my-order">
					<text class="my-title">我的订单</text>
					<u-grid :border="false" col="4">
						<u-grid-item>
							<navigator url="/pages/orders/allOrders" hover-class="navigator-hover">
								<u-icon name="grid" label="全部订单" labelPos="bottom" size="40"></u-icon>
							</navigator>
						</u-grid-item> 
					</u-grid>
				</view>
				<view class="my-plugin">
					<text class="my-title">我的插件</text>
					<u-grid :border="false" col="4">
						<u-grid-item v-for="item in pluginData" :key="item.id" >
							<navigator class="my-navigator" :url="item.name" hover-class="navigator-hover">
								<u-image
									:showLoading="true"
									:src="item.icon"
									width="30px"
									height="30px"
								></u-image>
								<text>{{item.title}}</text>
							</navigator> 
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<nuoyu-tabbar :backgroundColor="themeColor.tabbarColor" :color="themeColor.font_assist" :selectedColor="themeColor.main_color" :current="current" :tabBar="tabBar"></nuoyu-tabbar>
		</view>
	</view>
</template>

<script>

export default {
	data() {
		return {
			current: 2,
			tabBar:[],
			pluginData:[],
			themeColor:'',
			wechatConfig:'',
			userInfo:{
				user_monery:0,
				nickName:'微信用户',
				head_img:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F9e8bd863-bf16-4647-abf0-88490ce78ced%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692239797&t=a656713f3185954147d0d361bef4b02d"
			}
		}
	},
	onLoad() {
		if(uni.getStorageSync('userInfo')){
			this.getH5Login(uni.getStorageSync('userInfo').openid)
		}
		else{
			// #ifdef MP-WEIXIN
				this.getLogin();
			// #endif 
			
			// #ifdef H5 || APP-PLUS || MP-ALIPAY
				uni.reLaunch({
					url:'/pages/login/index'
				})
			// #endif 
		}
		this.tabBar = this.$store.state.tabBarList || uni.getStorageSync('tabbar')
		this.current = this.$store.state.current || 3
		this.themeColor = this.$store.state.themeConfig || uni.getStorageSync('themeConfig')
		this.wechatConfig = this.$store.state.wechatConfig ||  uni.getStorageSync('wechatConfig')
		this.getplugin()
	},
 
	methods: {
		// click(item){
		// 	uni.navigateTo({
		// 		url:item.name
		// 	})
		// },
		getLogin(){
			wx.login({
				success: (e) => {
					this.tui.request("/basic-capi/wxlogin", "post", {code:e.code}).then((res) => {
						uni.setStorageSync('userInfo',res.data.userInfo)
						this.userInfo = res.data.userInfo
					}).catch((res) => {
						console.log(res)
					})
					
				}
			})
		},
		getH5Login(openid){
			this.tui.request("/basic-capi/h5LoginRefresh", "post", {openid:openid}).then((res) => {
				uni.setStorageSync('userInfo',res.data.userInfo)
				this.userInfo = res.data.userInfo
			}).catch((res) => {
				console.log(res)
			})
		},
		getplugin(){
			this.tui.request("/basic-capi/functionList/list","get").then((res)=>{
				if(res.code==200){
					this.pluginData = res.data.list
					this.pluginData.forEach(item=>{
						item.icon = this.wechatConfig.tencent‌Domain + item.icon
					})
				}
			}).catch((res) => {
				console.log(res)
			})
		}
	}
}
</script>
<style scoped lang="scss">
	.container {
	  display: flex;
	  flex-direction: column;
	  height: 100vh; /* 或 min-height: 100vh */
	}
	.content{
		flex:1;
		background: #eee;
	}
	.my-header{
		height: 500rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		// background-color: rgba(255, 255, 255, 0.5);
		// background-color:rgba(255,255,255,0.1); 
		// box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.4);
		.my-header-bg{
			position: absolute;
			background-color: var(--main-bg-color);
			// filter: blur(2px);
			height: 500rpx;
			width: 100%;
		}
		.my-userInfo{
			z-index: 99;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			gap: 20rpx;
			.head_img{
				height: 128rpx;
				width: 128rpx;
				border-radius: 50%;
			}
			view{
				color: white;
				font-size: 32rpx;
			}
		}
	}
	.my-serve{
		background-color: #ededed;
		.my-order,.my-plugin{
			margin: 15rpx;
			padding: 10rpx;
			border-radius: 15rpx;
			background-color: white;
		}
		.my-title{
			margin: 20rpx;
			color: #747474;
			font-size: 14px;
		}
		.u-grid  {
			padding: 20rpx;
		}
		.my-plugin{
			.my-navigator{
				margin: 10rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
	}
</style> 